<template>
    <view class="container">
        <!-- 自定义导航栏 -->
        <custom-navbar :showTitle="false" title="发布笔记" :isCoverNav="true" backgroundColor="#ffffff" textColor="#000000" :showBack="true"></custom-navbar>
        <!-- 上模块：图片上传、标题、正文 -->
        <view class="content-section">
            <!-- 媒体文件上传区域 -->
            <view class="image-upload-section">
                <u-upload
                    ref="uploadRef"
                    :fileList="fileList"
                    @afterRead="afterRead"
                    @delete="deleteFile"
                    name="1"
                    multiple
                    :maxCount="9"
                    :previewImage="true"
                    :previewFullImage="true"
                    :deletable="true"
                    width="80"
                    height="80"
                    imageMode="aspectFill"
                    accept="media "
                >
                </u-upload>
            </view>

            <!-- 标题输入 -->
            <view class="title-section">
                <u-input v-model="title" placeholder="添加标题" border="none" fontSize="16" maxlength="50"
                    clearable></u-input>
            </view>

            <!-- 正文输入 -->
            <view class="content-input-section">
                <u-textarea v-model="content" placeholder="添加正文" maxlength="1000" autoHeight border="none"></u-textarea>
            </view>
        </view>

        <!-- 下模块：发布按钮 -->
        <view class="publish-section">
            <u-button type="primary" text="发布笔记" :disabled="!canPublish" :loading="isPublishing" loadingText="发布中..."
                @click="publishNote"
                customStyle="width: 100%; height: 88rpx; border-radius: 44rpx; font-size: 32rpx;"></u-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import customNavbar from '../../components/custom-navbar/index.vue';
import { postAddFun, uploadImageFun, uploadVideoFun } from '@/api/port'
// 接口定义
interface ChooseMediaResult {
    tempFiles: {
        tempFilePath: string
        size: number
        fileType: 'image' | 'video'
    }[]
}

interface ToastOptions {
    title: string
    icon?: 'success' | 'error' | 'none'
    duration?: number
}

interface PreviewImageOptions {
    current: string
    urls: string[]
}

interface MediaItem {
    path: string
    type: 'image' | 'video'
    size: number
}

// 响应式数据
const uploadedMedia = ref<MediaItem[]>([])
const fileList = ref<any[]>([])
const title = ref<string>('🏖 【海边宝藏民宿｜住进杂志里的度假生活】')
const content = ref<string>(`这次小长假，真的被这家海边民宿惊艳到了！🌊
从踏进门的那一刻开始，就感觉像走进了一本旅行杂志。

✨ 设计感满满：
整体是极简ins风，以白色和原木为主调，大面积的落地窗直接把大海请进房间。白天阳光洒进来，晚上能躺在床上看海浪拍岸，简直浪漫到不行。

🛋 舒适度拉满：
房间空间很大，线条干净利落，家具质感很高级。床是真的巨舒服，搭配棉麻材质的床品，躺下就不想起来～
洗手间也很贴心，配备的是高级香氛洗护，细节感满分。

☕️ 体验：
最爱的是阳台！配着一杯咖啡或者小酒，看着无边际的海景，完全就是放空心灵的瞬间。晚上还能和朋友在露台小聚，氛围感拉满。

📍 位置：
离沙滩只有几分钟路程，走出去就能赤脚踩沙子。周边还有不少小众餐厅，很适合一整个悠闲假期。

💡 总结：
如果你喜欢设计感＋海景的度假体验，这里一定要收藏！无论情侣旅行还是闺蜜度假，都能拍出杂志大片。`)
const isPublishing = ref<boolean>(false)
const isUploading = ref<boolean>(false)
const uploadRef = ref()

// 计算属性
const canPublish = computed((): boolean => {
    return title.value.trim() !== '' || content.value.trim() !== '' || fileList.value.length > 0
})



// 发布笔记
const publishNote = (): void => {
    if (!canPublish.value) {
        uni.showToast({
            title: '请添加内容后再发布',
            icon: 'none',
            duration: 2000
        })
        return
    }

    isPublishing.value = true
    // 构建发布数据
    const publishData = {
        title: title.value,
        content: content.value,
        // image: fileList.value.map(item => item.url).join(',')
        image: fileList.value
    }
    // 调用发布接口
    const res = postAddFun(publishData)
        isPublishing.value = false
        if (res.code === 1) {
            uni.showToast({
                title: '发布成功',
                icon: 'success',
                duration: 2000
            })
            // 发布成功后返回上一页
            let timer = setTimeout(() => {
                uni.navigateBack()
                clearTimeout(timer)
            }, 1500)
        } else if (res.code == 0) {
            console.log(res)
            uni.showToast({
                title: res.msg || '发布失败',
                icon: 'error',
                duration: 2000
            })
        }
    // .then(res => {
    //     isPublishing.value = false
    //     if (res.code === 1) {
    //         uni.showToast({
    //             title: '发布成功',
    //             icon: 'success',
    //             duration: 2000
    //         })
    //         // 发布成功后返回上一页
    //         let timer = setTimeout(() => {
    //             uni.navigateBack()
    //             clearTimeout(timer)
    //         }, 1500)
    //     } else if (res.code == 0) {
    //         console.log(res)
    //         uni.showToast({
    //             title: res.msg || '发布失败',
    //             icon: 'error',
    //             duration: 2000
    //         })
    //     }
    // }).catch(err => {
    //     isPublishing.value = false
    //     uni.showToast({
    //         title: err.msg || '发布失败',
    //         icon: 'error',
    //         duration: 2000
    //     })
    // })
}

// 页面加载
const onPageLoad = (): void => {
    // 页面初始化逻辑
}

const fileList1 = ref([]);

// 删除图片
const deletePic = (event) => {
  fileList.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
    console.log(event)
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
//   let fileListLen = fileList1.value.length;
  
  // 开始上传，显示全局loading
  isUploading.value = true;
  uni.showLoading({
    title: '上传中...',
    mask: true
  });
  
//   lists.map((item) => {
//     fileList1.value.push({
//       ...item,
//       status: 'uploading',
//       message: '上传中',
//     });
//   });
  
  try {
    for (let i = 0; i < lists.length; i++) {
      const result = await uploadFilePromise(lists[i].url,lists[i].type);
      console.log(result)
      fileList.value.push({
        type: lists[i].type,
        url: result.data.uri,
      })
    //   let item = fileList1.value[fileListLen];
    //   fileList1.value.splice(fileListLen, 1, {
    //     ...item,
    //     status: 'success',
    //     message: '',
    //     url: result,
    //   });
    //   fileListLen++;
    }
  } catch (error) {
    console.error('上传失败:', error);
    uni.showToast({
      title: '上传失败',
      icon: 'error'
    });
  } finally {
    // 所有上传完成，隐藏全局loading
    isUploading.value = false;
    uni.hideLoading();
  }
};

const uploadFilePromise = (url,type) => {
  return new Promise((resolve, reject) => {
    let a = null
    if(type == 'image'){
        a = uni.uploadFile({
            url: 'https://client-hoteltool.shengxuankj.com/api/upload/image', // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
                user: 'test',
            },
            header: {
                'Content-Type': 'multipart/form-data',
                'Token': uni.getStorageSync('token')
            },
            success: (res) => {
                try {
                    resolve(JSON.parse(res.data));
                } catch (error) {
                    reject(new Error('解析响应数据失败'));
                }
            },
            fail: (error) => {
                reject(new Error('图片上传失败: ' + error.errMsg));
            }
        });
    } else if (type == 'video') {
        a = uni.uploadFile({
            url: 'https://client-hoteltool.shengxuankj.com/api/upload/video', // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
                user: 'test',
            },
            header: {
                'Content-Type': 'multipart/form-data',
                'Token': uni.getStorageSync('token')
            },
            success: (res) => {
                try {
                    resolve(JSON.parse(res.data));
                } catch (error) {
                    reject(new Error('解析响应数据失败'));
                }
            },
            fail: (error) => {
                reject(new Error('视频上传失败: ' + error.errMsg));
            }
        });
    } else {
        reject(new Error('不支持的文件类型'));
    }
  });
};



// 页面挂载
onMounted(() => {
    onPageLoad()
})

</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f8f8;
}

/* 上模块样式 */
.content-section {
    flex: 1;
    padding: 20rpx;
    background-color: #ffffff;
    margin-bottom: 20rpx;
}

/* 图片上传区域 */
.image-upload-section {
    margin-bottom: 30rpx;
}

/* 标题输入区域 */
.title-section {
    margin-bottom: 30rpx;
    padding: 20rpx 18rpx;
    border-bottom: 1rpx solid #eeeeee;
}

/* 正文输入区域 */
.content-input-section {
    margin-bottom: 30rpx;
    /* padding: 20rpx 0; */
    /* border-left: 4rpx solid #ff4757; */
    /* padding-left: 20rpx; */
}

/* 下模块样式 */
.publish-section {
    padding: 30rpx 20rpx;
    background-color: #ffffff;
    border-top: 1rpx solid #eeeeee;
}
</style>